<template>
    <n-flex justify="space-around">
        <n-tabs
            class="card-tabs"
            default-value="signin"
            size="large"
            animated
            pane-wrapper-style="margin: 0 -4px"
            pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
        >
            <!-- 登录 tab -->
            <n-tab-pane name="signin" tab="登录">
                <n-form>
                    <n-form-item-row label="用户名">
                        <n-input placeholder="请输入用户名" v-model:value="loginInfo.username" />
                    </n-form-item-row>
                    <n-form-item-row label="密码">
                        <n-input
                            placeholder="请输入密码"
                            v-model:value="loginInfo.password"
                            type="password"
                            show-password-on="click"
                        >
                            <template #password-visible-icon>
                                <n-icon :size="16" :component="GlassesOutline" />
                            </template>
                            <template #password-invisible-icon>
                                <n-icon :size="16" :component="Glasses" />
                            </template>
                        </n-input>
                    </n-form-item-row>
                </n-form>
                <n-button
                    type="primary"
                    :loading="loginLoadingHandler.loading"
                    @click="login"
                    block
                    success
                    strong
                >
                    登录
                </n-button>
            </n-tab-pane>
            <!-- 注册 tab -->
            <n-tab-pane name="signup" tab="注册">
                <n-form>
                    <n-form-item-row label="用户名">
                        <n-input placeholder="请输入用户名" v-model:value="registerInfo.username" />
                    </n-form-item-row>
                    <n-form-item-row label="密码">
                        <n-input
                            placeholder="请输入密码"
                            v-model:value="registerInfo.password"
                            type="password"
                            show-password-on="click"
                        >
                            <template #password-visible-icon>
                                <n-icon :size="16" :component="GlassesOutline" />
                            </template>
                            <template #password-invisible-icon>
                                <n-icon :size="16" :component="Glasses" />
                            </template>
                        </n-input>
                    </n-form-item-row>
                    <n-form-item-row label="重复密码">
                        <n-input placeholder="请确认密码" v-model:value="registerInfo.rePassword" />
                    </n-form-item-row>
                    <n-form-item-row label="邮箱">
                        <n-input-group>
                            <n-input
                                placeholder="请输入注册邮箱"
                                v-model:value="registerInfo.email"
                            />
                            <n-button
                                :disabled="isCountDownState"
                                :loading="verifyCodeLoadingHandler.loading"
                                @click="sendEmailVerifyCode"
                                >{{ dynamicText.verifyCode }}</n-button
                            >
                        </n-input-group>
                    </n-form-item-row>
                    <n-form-item-row label="验证码">
                        <n-input
                            placeholder="请输入验证码(留意下邮箱的回收站哦~~)"
                            v-model:value="registerInfo.verifyCode"
                        />
                    </n-form-item-row>
                </n-form>
                <n-button
                    type="primary"
                    :loading="registerLoadingHandler.loading"
                    @click="register"
                    block
                    secondary
                    strong
                >
                    注册
                </n-button>
            </n-tab-pane>
        </n-tabs>
    </n-flex>
</template>

<script lang="ts" setup>
import { Glasses, GlassesOutline } from '@vicons/ionicons5';
import { reactive, ref } from 'vue';

import { useLoading } from '@/hooks/index';
import { clearObj } from '@/utils/common/index';

import { fetchRegister, fetchSendVerifyCode } from '~/src/service/api/auth';
import { useAuthStore } from '~/src/store';

defineOptions({ name: 'LoginTabs' });
const emits = defineEmits(['loginSuccess', 'registerSuccess']);
const authStore = useAuthStore();

/** 默认发送验证码间隔(s) */
const DEFAULT_SEND_VERIFY_CODE_INTERVAL = 60;

/** 动态文本 */
type DynamicText = {
    /** 邮箱验证码 */
    verifyCode: string;
};

/** 登录信息 */
let loginInfo: User.Login = reactive({
    username: '',
    password: ''
});

/** 注册信息 */
let registerInfo: User.Register = reactive({
    username: '',
    password: '',
    rePassword: '',
    email: '',
    verifyCode: ''
});

/** 动态文本 */
let dynamicText: DynamicText = reactive({
    verifyCode: '发送验证码'
});

/** 执行验证码倒计时 */
let isCountDownState = ref(false);
let countDownTime = DEFAULT_SEND_VERIFY_CODE_INTERVAL;
let verifyCodeLoadingHandler = reactive(useLoading(false));
async function sendEmailVerifyCode() {
    // 加载 loading
    verifyCodeLoadingHandler.startLoading();
    let verifyCodeResult = await fetchSendVerifyCode(registerInfo.email);
    // 如果发送成功进行倒计时
    if (verifyCodeResult.success) {
        isCountDownState.value = true;
        window.$message?.success('发送成功, 请注意查收!!');
        dynamicText.verifyCode = countDownTime + '秒后重试';
        // 会延迟 1 秒执行
        let countDownInterval = window.setInterval(() => {
            // 更新时间，为 0 时重置
            dynamicText.verifyCode = --countDownTime + '秒后重试';
            if (countDownTime == 0) {
                window.clearTimeout(countDownInterval);
                // 重置倒计时信息
                isCountDownState.value = false;
                dynamicText.verifyCode = '发送验证码';
                countDownTime = DEFAULT_SEND_VERIFY_CODE_INTERVAL;
            }
        }, 1000);
    }
    verifyCodeLoadingHandler.endLoading();
}

/** 发起登录请求 */
let loginLoadingHandler = reactive(useLoading(false));
async function login() {
    // 发起登录
    loginLoadingHandler.startLoading();
    let loginResult = await authStore.loginHandler(loginInfo);
    if (authStore.isLogin) {
        window.$message?.success('登录成功');
        clearObj(loginInfo);
    }
    loginLoadingHandler.endLoading();
    emits('loginSuccess', loginResult);
}

/** 发起注册请求 */
let registerLoadingHandler = reactive(useLoading(false));
async function register() {
    // 发起注册
    registerLoadingHandler.startLoading();
    let registerResult = await fetchRegister(registerInfo);
    if (registerResult.success) {
        window.$message?.success('注册成功');
        clearObj(registerInfo);
    }
    registerLoadingHandler.endLoading();
    emits('registerSuccess', registerResult);
}
</script>
